<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript">
	//创建XMLHttpRequest对象
	function createXMLHttpRequest() {
		var xmlHttpReq = null;
		if(window.XMLHttpRequest){
			//IE7.0及以上版本和非IE的浏览器
			xmlHttpReq = new XMLHttpRequest();
		}else{  //IE 6.0及以下版本
			try{
				xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
			}catch(e){
				xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		if(xmlHttpReq==null){
			alert("当前浏览器不支持ajax");
		}
		return xmlHttpReq;
	}
	
	//发送ajax请求
	function ajaxForXml(obj){
		var xmlHttpRequest = createXMLHttpRequest();
		if (xmlHttpRequest != null) {
			var param = "action=xml&province="+obj.value;
			xmlHttpRequest.onreadystatechange = function(){
				//请求已完成
				if(xmlHttpRequest.readyState==4) {
					//请求成功
					if(xmlHttpRequest.status==200) {
						var xmlDoc = xmlHttpRequest.responseXML;
						processXML(xmlDoc);
					}
				}
			};
			//true : 以异步方式访问
			xmlHttpRequest.open("post", "${pageContext.request.contextPath}/control", true);
			// 窗体数据被编码为名称/值对
			xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//发送请求
			xmlHttpRequest.send(param);
		}
	}
	
	function processXML(xmlDoc) {
		var cityElement = document.getElementsByName("city1")[0];
		cityElement.innerHTML = "";
		
		var cities = xmlDoc.getElementsByTagName("cities")[0].childNodes;
		for(var i=0; i<cities.length; i++) {
			var city = cities[i];
			var v = city.getAttribute("value");  //获取属性值
			var t = city.textContent;            //获取文本值
			
			var option = document.createElement("option");
			var cnt = document.createTextNode(t);
			option.appendChild(cnt);
			option.value = v;
			
			cityElement.appendChild(option);
		}
	}
	
	//以Json格式解析数据
	function ajaxForJson(obj){
		var xmlHttpRequest = createXMLHttpRequest();
		if (xmlHttpRequest != null) {
			var param = "action=json&province="+obj.value;
			xmlHttpRequest.onreadystatechange = function(){
				//请求已完成
				if(xmlHttpRequest.readyState==4) {
					//请求成功
					if(xmlHttpRequest.status==200) {
						//将json格式的字符串转成json对象
						var jsonData = eval(xmlHttpRequest.responseText);
						processJson(jsonData);
					}
				}
			};
			//true : 以异步方式访问
			xmlHttpRequest.open("post", "${pageContext.request.contextPath}/control", true);
			// 窗体数据被编码为名称/值对
			xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//发送请求
			xmlHttpRequest.send(param);
		}
	}
	
	function processJson(jsonData) {
		var cityElement = document.getElementsByName("city2")[0];
		cityElement.innerHTML = "";
		
		for(var i=0; i<jsonData.length; i++) {
			var city = jsonData[i];
			
			var option = document.createElement("option");
			var cnt = document.createTextNode(city);
			option.appendChild(cnt);
			option.value = city;
			
			cityElement.appendChild(option);
		}
	}
</script>
</head>
<body>
	<select name="province1" onchange="ajaxForXml(this);">
		<option value="江西省">江西省</option>
		<option value="广东省">广东省</option>
		<option value="福建省">福建省</option>
	</select>
	省
	<select name="city1">
		<option value="南昌市">南昌市</option>
		<option value="赣州市">赣州市</option>
		<option value="九江市">九江市</option>
		<option value="抚州市">抚州市</option>
		<option value="吉安市">吉安市</option>
	</select>
	市<br>
	<hr>
	<select name="province2" onchange="ajaxForJson(this);">
		<option value="江西省">江西省</option>
		<option value="广东省">广东省</option>
		<option value="福建省">福建省</option>
	</select>
	省
	<select name="city2">
		<option value="南昌市">南昌市</option>
		<option value="赣州市">赣州市</option>
		<option value="九江市">九江市</option>
		<option value="抚州市">抚州市</option>
		<option value="吉安市">吉安市</option>
	</select>
	市<br>
</body>
</html>